<template>
	<div class="login-vue" :style="bg">
		<div align="center" style="width: 1100px;">
			<div class="title">
				<div style="font-size: 80px">四维空间</div>
				<div style="font-size: 40px">轻 量 高 效</div>
			</div>
			<div class="container">
				<p class="smalltitle">欢迎</p>

				<div class="input-c">
					<input placeholder="用户名" type="text" v-model="userName">
					<!-- <Input v-model="userName" placeholder="用户名" @on-blur="verifyAccount" /> -->
					<p class="error">{{accountError}}</p>
				</div>

				<div class="input-c">
					<input placeholder="密码" type="password" v-model="userPwd">
					<!-- <Input type="password" v-model="userPwd" prefix="md-lock" placeholder="密码" clearable @on-blur="verifyPwd"
                    @keyup.enter.native="submit" /> -->
					<p class="error">{{pwdError}}</p>
				</div>

				<Button :loading="isShowLoading" class="submit" type="primary" @click="submit">登陆</Button>
				<!-- <p class="account"><span @click="register">注册账号</span> | <span @click="forgetPwd">忘记密码</span></p> -->


			</div>
		</div>
	</div>
</template>

<script>
	import Index from '../components/Index.vue'
	import axios from 'axios'
	import Vue from 'vue'
	import { resetRouter } from '@/router'

	export default {

		name: 'login',
		data() {
			return {
				account: '',
				userName: 'scott',
				userPwd: 'tiger',
				pwd: '',
				accountError: '',
				pwdError: '',
				isShowLoading: false,
				bg: {},


				url: '/api/user/login?',
			}
		},
		created() {
			// this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg0' + new Date().getDay() + '.jpg') + ')'
			this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg01.jpg') + ')'
		},
		watch: {
			$route: {
				handler(route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true,
			},
		},
		methods: {

			//用户名验证
			verifyAccount() {
				if (this.account !== 'admin') {
					this.accountError = '测试账号为admin'
				} else {
					this.accountError = ''
				}
			},

			//密码验证
			verifyPwd() {
				if (this.pwd !== 'admin') {
					this.pwdError = '测试密码为admin'
				} else {
					this.pwdError = ''
				}
			},
			register() {

			},
			forgetPwd() {

			},

			//登录
			submit() {
				console.log('登录按钮')
				this.url += ('userName=' + this.userName + '&userPwd=' + this.userPwd)
				// console.log('userName:'+this.userName)
				console.log(this.url)
				this.request(this.url)
				this.url = '/api/user/login?'
				// if (this.account === 'admin' && this.pwd === 'admin') {
				//     this.isShowLoading = true
				//     // 登陆成功 设置用户信息
				//     localStorage.setItem('userImg', 'https://avatars3.githubusercontent.com/u/22117876?s=460&v=4')
				//     localStorage.setItem('userName', '测试用户')
				//     // 登陆成功 假设这里是后台返回的 token
				//     // localStorage.setItem('token', 'i_am_token')
				//     this.$router.push(this.Index)
				// } else {
				//     if (this.account !== 'admin') {
				//         this.accountError = '账号为admin'
				//     }

				//     if (this.pwd !== 'admin') {
				//         this.pwdError = '密码为admin'
				//     }
				// }
			},


			request(URL) {
				axios({
					method: 'post',
					url: URL,
				}).then(response => {
					this.loginSuccess(response.data)
					console.log(response.data);
				});
			},

			//判断是否登陆成功
			loginSuccess(data) {
				if (data.UserToken) {
					console.log('登陆成功!上次登录时间为：' + data.LatestTime);
					this.$router.push({
						name:'index',
						params:{}
					})
				} else {
					console.log('登陆失败，状态码为:' + data.Status);
				}
			}

		},
	}
</script>

<style>
	.login-vue {
		/* width: auto; */
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.login-vue .title {
		float: left;
	}

	.login-vue .container {
		float: right;
		background: rgba(255, 255, 255, .2);
		width: 350px;
		text-align: center;
		border-radius: 5px;
		padding: 20px;
	}

	.login-vue .ivu-input {
		background-color: transparent;
		color: white;
		outline: #fff;
		border-color: white;
		border-radius: 3px;
	}

	.login-vue ::-webkit-input-placeholder {
		/* WebKit, Blink, Edge */
		color: rgba(255, 255, 255, .8);
	}

	.login-vue :-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: rgba(255, 255, 255, .8);
	}

	.login-vue ::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: rgba(255, 255, 255, .8);
	}

	.login-vue :-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: rgba(255, 255, 255, .8);
	}

	.login-vue .smalltitle {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.login-vue .input-c {
		margin: auto;
		width: 200px;
	}

	.login-vue .error {
		color: red;
		text-align: left;
		margin: 5px auto;
		font-size: 12px;
		padding-left: 30px;
		height: 20px;
	}

	.login-vue .submit {
		font-size: 20px;
		width: 180px;
		height: 45px;
		color: white;
		background-color: royalblue;
	}

	.login-vue .account {
		margin-top: 30px;
	}

	.login-vue .container p {
		font-size: 18px;
	}

	.login-vue .account span {
		cursor: pointer;
	}

	.login-vue .ivu-icon {
		color: white;
	}

	.login-vue .ivu-icon-ios-close-circle {
		color: #777;
	}
</style>
